﻿<!DOCTYPE html>
<html>
<head>
    <title> ZTREE DEMO - drag with other DOM</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
    <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
    <!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>-->
    <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
    <link href="dargnew.css" rel="stylesheet" />

    <script type="text/javascript">
		<!--
        var zTree, rMenu;
		var MoveTest = {
			errorMsg: "放错了...请选择正确的类别！",
			curTarget: null,
			curTmpTarget: null,
			noSel: function () {
				try {
					window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
				} catch(e){}
			},
			dragTree2Dom: function(treeId, treeNodes) {
				return !treeNodes[0].isParent;
			},
			prevTree: function(treeId, treeNodes, targetNode) {
				return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
			},
			nextTree: function(treeId, treeNodes, targetNode) {
				return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
			},
			innerTree: function(treeId, treeNodes, targetNode) {
				return targetNode!=null && targetNode.isParent && targetNode.tId == treeNodes[0].parentTId;
			},
			dropTree2Dom: function (e, treeId, treeNodes, targetNode, moveType) {

			    console.log("dropTree2Dom");
				var domId = "dom_" + treeNodes[0].getParentNode().id;
				if (moveType == null && (domId == e.target.id || $(e.target).parents("#" + domId).length > 0)) {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					zTree.removeNode(treeNodes[0]);

					var newDom = $("span[domId=" + treeNodes[0].id + "]");
					if (newDom.length > 0) {
						//newDom.removeClass("domBtn_Disabled");
						//newDom.addClass("domBtn");
					} else {
						$("#" + domId).append("<span class='domBtn' domId='" + treeNodes[0].id + "'>" + treeNodes[0].name + "</span>");
					}
					MoveTest.updateType();
				} else if ( $(e.target).parents(".domBtnDiv").length > 0) {
					alert(MoveTest.errorMsg);
				}
			},
			dom2Tree: function(e, treeId, treeNode) {
				var target = MoveTest.curTarget, tmpTarget = MoveTest.curTmpTarget;
				if (!target) return;
				var zTree = $.fn.zTree.getZTreeObj("treeDemo"), parentNode;
				if (treeNode != null && treeNode.isParent && "dom_" + treeNode.id == target.parent().attr("id")) {
					parentNode = treeNode;
				} else if (treeNode != null && !treeNode.isParent && "dom_" + treeNode.getParentNode().id == target.parent().attr("id")) {
					parentNode = treeNode.getParentNode();
				}

				if (tmpTarget) tmpTarget.remove();
				if (!!parentNode) {
					var nodes = zTree.addNodes(parentNode, {id:target.attr("domId"), name: target.text()});
					zTree.selectNode(nodes[0]);
				} else {
					//target.removeClass("domBtn_Disabled");
					//target.addClass("domBtn");
					alert(MoveTest.errorMsg);
				}
				MoveTest.updateType();
				MoveTest.curTarget = null;
				MoveTest.curTmpTarget = null;
			},

			updateType: function() {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
				nodes = zTree.getNodes();
				for (var i=0, l=nodes.length; i<l; i++) {
					//var num = nodes[i].children ? nodes[i].children.length : 0;
					//nodes[i].name = nodes[i].name.replace(/ \(.*\)/gi, "") + " (" + num + ")";
					//zTree.updateNode(nodes[i]);
				}
			},
			bindDom: function() {
				$(".domBtnDiv").bind("mousedown", MoveTest.bindMouseDown);
			},
			bindMouseDown: function (e) {
			   
				var target = e.target;
				if (target!=null && target.className=="domBtn") {
					var doc = $(document), target = $(target),
					docScrollTop = doc.scrollTop(),
					docScrollLeft = doc.scrollLeft();
					//target.addClass("domBtn_Disabled");
				    //target.removeClass("domBtn");

					curDom = $("<span class='dom_tmp domBtn'>" + target.text() + "</span>");
					curDom.appendTo("body");

					curDom.css({
						"top": (e.clientY + docScrollTop -15) + "px",
						"left": (e.clientX + docScrollLeft - 10) + "px"
					});
					MoveTest.curTarget = target;
					MoveTest.curTmpTarget = curDom;

					doc.bind("mousemove", MoveTest.bindMouseMove);
					doc.bind("mouseup", MoveTest.bindMouseUp);
					doc.bind("selectstart", MoveTest.docSelect);
				}
				if(e.preventDefault) {
					e.preventDefault();
				}
			},
			bindMouseMove: function (e) {
			    MoveTest.noSel();

				var doc = $(document),
				docScrollTop = doc.scrollTop(),
				docScrollLeft = doc.scrollLeft(),
				tmpTarget = MoveTest.curTmpTarget;
				console.log(MoveTest.curTmpTarget);
				if (tmpTarget) {
					tmpTarget.css({
					    "top": (e.clientY + docScrollTop - 15) + "px",
					    "left": (e.clientX + docScrollLeft - 15) + "px"
					});
				}
				return false;
			},
			bindMouseUp: function(e) {
				var doc = $(document);
				doc.unbind("mousemove", MoveTest.bindMouseMove);
				doc.unbind("mouseup", MoveTest.bindMouseUp);
				doc.unbind("selectstart", MoveTest.docSelect);

				var target = MoveTest.curTarget, tmpTarget = MoveTest.curTmpTarget;
				if (tmpTarget) tmpTarget.remove();

				if ($(e.target).parents("#treeDemo").length == 0) {
					if (target) {
						//target.removeClass("domBtn_Disabled");
						//target.addClass("domBtn");
					}
					MoveTest.curTarget = null;
					MoveTest.curTmpTarget = null;
				}
			},
			bindSelect: function() {
				return false;
			},
		};

		var setting = {
			edit: {
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false,
				drag: {
					prev: MoveTest.prevTree,
					next: MoveTest.nextTree,
					inner: MoveTest.innerTree
				}
			},
			data: {
				keep: {
					parent: true,
					leaf: true
				},
				simpleData: {
					enable: true
				}
			},
			callback: {
			    beforeDrag: MoveTest.dragTree2Dom,//用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作
			    onDrop: MoveTest.dropTree2Dom,//用于捕获节点拖拽操作结束的事件回调函数
			    onDragMove: MoveTest.dragMove,//ondragover 事件在可拖动元素或选取的文本正在拖动到放置目标时触发。
			    onMouseUp: MoveTest.dom2Tree,//用于捕获 zTree 上鼠标按键松开后的事件回调函数
			    onRightClick: OnRightClick
			},
			view: {
			    selectedMulti: false,
			    dblClickExpand: false,
			    showIcon: false,
			    nameIsHTML: true,
			 //右键
			    fontCss: { color: "#ff0011", background: "#5cb85c", width: "48px" }

			    /*background-color: #5cb85c;
     border-color: #4cae4c;*/
			    //fontCss: setFontCss
                //setting.view.showLine = false 隐藏连接线
			}
		};


		function OnRightClick(event, treeId, treeNode) {
		    if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
		        zTree.cancelSelectedNode();
		        showRMenu("root", event.clientX, event.clientY);
		    } else if (treeNode && !treeNode.noR) {
		        zTree.selectNode(treeNode);
		        showRMenu("node", event.clientX, event.clientY);
		    }
		}

		function showRMenu(type, x, y) {
		    $("#rMenu ul").show();
		    if (type == "root") {
		        $("#m_del").hide();
		        $("#m_check").hide();
		        $("#m_unCheck").hide();
		    } else {
		        $("#m_del").show();
		        $("#m_check").show();
		        $("#m_unCheck").show();
		    }
		    rMenu.css({ "top": y + "px", "left": x + "px", "visibility": "visible" });

		    $("body").bind("mousedown", onBodyMouseDown);
		}
		function hideRMenu() {
		    if (rMenu) rMenu.css({ "visibility": "hidden" });
		    $("body").unbind("mousedown", onBodyMouseDown);
		}
		function onBodyMouseDown(event) {
		    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
		        rMenu.css({ "visibility": "hidden" });
		    }
		}
		var addCount = 1;
		function addTreeNode() {
		    hideRMenu();
		    var newNode = { name: "增加" + (addCount++) };
		    if (zTree.getSelectedNodes()[0]) {
		        newNode.checked = zTree.getSelectedNodes()[0].checked;
		        zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
		    } else {
		        zTree.addNodes(null, newNode);
		    }
		}
		function removeTreeNode() {
		    hideRMenu();
		    var nodes = zTree.getSelectedNodes();
		    if (nodes && nodes.length > 0) {
		        if (nodes[0].children && nodes[0].children.length > 0) {
		            var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
		            if (confirm(msg) == true) {
		                zTree.removeNode(nodes[0]);
		            }
		        } else {
		            zTree.removeNode(nodes[0]);
		        }
		    }
		}
		function checkTreeNode(checked) {
		    var nodes = zTree.getSelectedNodes();
		    if (nodes && nodes.length > 0) {
		        zTree.checkNode(nodes[0], checked, true);
		    }
		    hideRMenu();
		}
		function resetTree() {
		    hideRMenu();
		    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
		}


		function OnRightClick(event, treeId, treeNode) {
		    if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
		        zTree.cancelSelectedNode();
		        showRMenu("root", event.clientX, event.clientY);
		    } else if (treeNode && !treeNode.noR) {
		        zTree.selectNode(treeNode);
		        showRMenu("node", event.clientX, event.clientY);
		    }
		}

		function showRMenu(type, x, y) {
		    $("#rMenu ul").show();
		    if (type=="root") {
		        $("#m_del").hide();
		        $("#m_check").hide();
		        $("#m_unCheck").hide();
		    } else {
		        $("#m_del").show();
		        $("#m_check").show();
		        $("#m_unCheck").show();
		    }
		    rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

		    $("body").bind("mousedown", onBodyMouseDown);
		}
		function hideRMenu() {
		    if (rMenu) rMenu.css({"visibility": "hidden"});
		    $("body").unbind("mousedown", onBodyMouseDown);
		}
		function onBodyMouseDown(event){
		    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
		        rMenu.css({"visibility" : "hidden"});
		    }
		}
		var addCount = 1;
		function addTreeNode() {
		    hideRMenu();
		    var newNode = { name:"增加" + (addCount++)};
		    if (zTree.getSelectedNodes()[0]) {
		        newNode.checked = zTree.getSelectedNodes()[0].checked;
		        zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
		    } else {
		        zTree.addNodes(null, newNode);
		    }
		}
		function removeTreeNode() {
		    hideRMenu();
		    var nodes = zTree.getSelectedNodes();
		    if (nodes && nodes.length>0) {
		        if (nodes[0].children && nodes[0].children.length > 0) {
		            var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
		            if (confirm(msg)==true){
		                zTree.removeNode(nodes[0]);
		            }
		        } else {
		            zTree.removeNode(nodes[0]);
		        }
		    }
		}
		function checkTreeNode(checked) {
		    var nodes = zTree.getSelectedNodes();
		    if (nodes && nodes.length>0) {
		        zTree.checkNode(nodes[0], checked, true);
		    }
		    hideRMenu();
		}
		function resetTree() {
		    hideRMenu();
		    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
		}


		var zNodes =[
			{ id: 1, pId: 0, name: "阶段一", font: { 'background-color': 'black', 'color': 'white' }, isParent: true, open: true, icon: "../../../css/zTreeStyle/img/diy/2.png" ,a:"b"},
			{ id: 2, pId: 0, name: "阶段二", isParent: true, open: true, icon: "../../../css/zTreeStyle/img/diy/2.png", a: "b" },
			{ id: 20, pId: 2, name: "里程碑1", open: true, class: "wocao", a: "b" },
			{ id: 29, pId: 2, name: "里程碑2", open: true, a: "b" },
			{ id: 10, pId: 1, name: "里程碑3", open: true, a: "b" },
			{ id: 19, pId: 1, name: "里程碑4", open: true, a: "b" }
		];

	
		var zTree, rMenu;
		//2. 针对节点增加 class 请利用 onNodeCreated 回调，捕获 DOM 创建完毕的回调，然后利用 zTree 的规则找到 treeNode.tId + "_a" 这样的 <a> 标签，自行添加 class 就是了
		$(document).ready(function(){
		    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
		    zTree = $.fn.zTree.getZTreeObj("treeDemo");
		    rMenu = $("#rMenu");
			MoveTest.bindDom();
		});
		//-->
    </script>

</head>
<body>
    <div id="rMenu">
        <ul>
            <li id="m_add" onclick="addTreeNode();">增加节点</li>
            <li id="m_del" onclick="removeTreeNode();">删除节点</li>
            <li id="m_check" onclick="checkTreeNode(true);">Check节点</li>
            <li id="m_unCheck" onclick="checkTreeNode(false);">unCheck节点</li>
            <li id="m_reset" onclick="">上移</li>
        </ul>
    </div>

    <h1>与其他 DOM 拖拽互动</h1>
    <h6>[ 文件路径: super/dragWithOther.html ]</h6>
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <div class="right">
            <ul class="info">
                <li class="title">
                   
                </li>
                <li class="title">
                    <h2>请拖拽下面内容到 树节点上</h2>
                    <div class="domBtnDiv">
                        <div id="dom_1" class="categoryDiv"><span class="domBtn" domid="11">阶段</span><span class="domBtn" domid="12">里程碑</span><span class="domBtn" domid="13">交付物</span></div>
                    </div>
                    <span class="highlight_red">也可以把二级节点拖拽到以上图层 </span>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>